<template>
  <div class="page">
    <van-nav-bar title="消息" left-text="返回" left-arrow @click-left="handleBack" />
    <div class="content">
      <div class="messages-list" ref="messageList">
        <div v-for="(message, index) in messages" :key="index" class="message-item">
          <div :class="{'message-text': true, 'sent-by-user': message.sender === '我', 'sent-by-system': message.sender === '自动回复'}">
            {{ message.text }}
          </div>
        </div>
      </div>
      <div class="input-section">
        <div class="suggested-questions">
          <div v-for="(question, index) in suggestedQuestions" :key="index" class="question-item" @click="sendSuggestedQuestion(question)">
            {{ question }}
          </div>
        </div>
        <van-field v-model="newMessage" placeholder="请输入消息内容" />
        <van-button type="primary" block @click="sendMessage">发送</van-button>
      </div>
    </div>
    <van-tabbar v-model="activeTab" fixed bottom>
      <van-tabbar-item icon="home-o" @click="navigateTo('home')">首页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" @click="navigateTo('messages')">消息</van-tabbar-item>
      <van-tabbar-item icon="user-o" @click="navigateTo('personal-center')">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const activeTab = ref(1); // 消息页面

const messages = ref([]);
const newMessage = ref('');
const suggestedQuestions = ref([
  '什么是桂林理工大学',
  '如何查看报修进度'
]);

const messageList = ref(null);

onMounted(() => {
  nextTick(() => {
    messageList.value.scrollTop = messageList.value.scrollHeight;
  });
});

const handleBack = () => {
  router.back();
};

const navigateTo = (page) => {
  router.push(`/${page}`);
};

const sendMessage = async () => {
  if (newMessage.value.trim() === '') return;

  messages.value.push({ text: newMessage.value, sender: '我' });
  nextTick(() => {
    messageList.value.scrollTop = messageList.value.scrollHeight;
  });

  try {
    const response = await axios.post('http://localhost:8080/messages/send', { message: newMessage.value });
    messages.value.push({ text: response.data.reply, sender: '自动回复' });
    nextTick(() => {
      messageList.value.scrollTop = messageList.value.scrollHeight;
    });
  } catch (error) {
    console.error('消息发送失败:', error);
  }

  newMessage.value = '';
};

const sendSuggestedQuestion = (question) => {
  newMessage.value = question;
  sendMessage();
};
</script>

<style scoped>
.page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Arial, sans-serif;
  background-color: #f7f8fa;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow: hidden;
}

.messages-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 10px;
}

.message-item {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.message-text {
  font-size: 16px;
  color: #333;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

.sent-by-user {
  background-color: #daf1da;
  text-align: right;
}

.sent-by-system {
  background-color: #f0f0f0;
}

.input-section {
  display: flex;
  flex-direction: column;
  position: fixed;
  bottom: 49px; /* 确保在底部栏之上 */
  left: 0;
  right: 0;
  background-color: #f7f8fa;
  padding: 10px 20px;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.suggested-questions {
  margin-bottom: 10px;
}

.question-item {
  padding: 10px;
  background-color: #e0e0e0;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}

.van-field {
  margin-bottom: 10px;
}

.van-button {
  margin-top: 10px;
}
</style>
